import React from 'react';
import {Card, Tabs, DatePicker, Row, Col} from 'antd';
import DataSet from '@antv/data-set';
import {Chart, Axis, Geom, Tooltip, Legend} from 'bizcharts';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';

// import {getTimeDistance} from '@/common/Util';

const {TabPane} = Tabs;
const {RangePicker} = DatePicker;
const dateFormat = 'YYYY-MM-DD HH:mm';
const dateFormatDay = 'YYYY-MM-DD';

export default class ActivityChart extends React.Component {
  state = {
    loading: true,
    key: 'day',
    searchTime: [
      moment (moment ().format (dateFormatDay), dateFormat),
      moment (`${moment ().format (dateFormatDay)} 23:59:59`, dateFormat),
    ],
    tabList: [
      {
        key: 'day',
        tab: '今日',
      },
      {
        key: 'week',
        tab: '本周',
      },
      {
        key: 'month',
        tab: '本月',
      },
    ],
    data: [],
  };
  componentDidMount () {
    setTimeout (() => {
      this.setState ({
        loading: false,
        data: [
          {key: '0-10', 活动一: 7.0, 活动: 3.9},
          {key: '10-12', 活动一: 6.9, 活动: 4.2},
          {key: '12-14', 活动一: 9.5, 活动: 5.7},
          {key: '14-16', 活动一: 14.5, 活动: 8.5},
          {key: '16-18', 活动一: 18.4, 活动: 11.9},
          {key: '18-20', 活动一: 21.5, 活动: 15.2},
          {key: '20-22', 活动一: 25.2, 活动: 17.0},
          {key: '22-0', 活动一: 26.5, 活动: 16.6},
        ],
      });
    }, 1000);
    // setTimeout(() => {
    //   const weekOfday = moment().format('E');//计算今天是这周第几天
    //   const startTime = moment().subtract(weekOfday-1, 'days').format('YYYY/MM/DD');
    //   const endTime = moment().subtract(weekOfday-6, 'days').format('YYYY/MM/DD') + ' 23:59';
    //   this.setState ({
    //     searchTime: [moment(startTime, dateFormat),moment(endTime,dateFormat)],
    //   });
    // }, 5000);
  }
  //切换数据
  onTabChange = (key, type) => {
    this.setState ({[type]: key});
    console.log ('ddd');
    if (key === 'week') {
      const weekOfday = moment ().format ('E'); //计算今天是这周第几天
      const startTime = moment ()
        .subtract (weekOfday - 1, 'days')
        .format ('YYYY/MM/DD');
      const endTime =
        moment ().subtract (weekOfday - 6, 'days').format ('YYYY/MM/DD') +
        ' 23:59';
      this.setState ({
        searchTime: [
          moment (startTime, dateFormat),
          moment (endTime, dateFormat),
        ],
        data: [
          {key: '5-1', 活动一: 7.0, 活动: 3.9},
          {key: '5-2', 活动一: 6.9, 活动: 4.2},
          {key: '5-3', 活动一: 9.5, 活动: 5.7},
          {key: '5-4', 活动一: 14.5, 活动: 8.5},
          {key: '5-5', 活动一: 18.4, 活动: 11.9},
          {key: '5-6', 活动一: 18.4, 活动: 11.9},
          {key: '5-7', 活动一: 18.4, 活动: 11.9},
        ],
      });
    } else if (key === 'day') {
      this.setState ({
        searchTime: [
          moment (moment ().format (dateFormatDay), dateFormat),
          moment (`${moment ().format (dateFormatDay)} 23:59:59`, dateFormat),
        ],
        data: [
          {key: '0-10', 活动一: 7.0, 活动: 3.9},
          {key: '10-12', 活动一: 6.9, 活动: 4.2},
          {key: '12-14', 活动一: 9.5, 活动: 5.7},
          {key: '14-16', 活动一: 14.5, 活动: 8.5},
          {key: '16-18', 活动一: 18.4, 活动: 11.9},
          {key: '18-20', 活动一: 21.5, 活动: 15.2},
          {key: '20-22', 活动一: 25.2, 活动: 17.0},
          {key: '22-0', 活动一: 26.5, 活动: 16.6},
        ],
      });
    } else if (key === 'month') {
      const startTime =
        moment ().startOf ('month').format (dateFormatDay) + ' 00:00';
      const endTime =
        moment ().endOf ('month').format (dateFormatDay) + ' 23:59';
      this.setState ({
        searchTime: [
          moment (startTime, dateFormat),
          moment (endTime, dateFormat),
        ],
        data: [
          {key: '1', 活动一: 7.0, 活动: 3.9},
          {key: '2', 活动一: 6.9, 活动: 4.2},
          {key: '3', 活动一: 9.5, 活动: 5.7},
          {key: '4', 活动一: 14.5, 活动: 8.5},
          {key: '5', 活动一: 18.4, 活动: 11.9},
          {key: '6', 活动一: 21.5, 活动: 15.2},
          {key: '7', 活动一: 25.2, 活动: 17.0},
          {key: '8', 活动一: 26.5, 活动: 16.6},
          {key: '9', 活动一: 23.3, 活动: 14.2},
          {key: '10', 活动一: 18.3, 活动: 10.3},
          {key: '11', 活动一: 13.9, 活动: 6.6},
          {key: '12', 活动一: 9.6, 活动: 4.8},
          {key: '13', 活动一: 7.0, 活动: 3.9},
          {key: '14', 活动一: 6.9, 活动: 4.2},
          {key: '15', 活动一: 9.5, 活动: 5.7},
          {key: '16', 活动一: 14.5, 活动: 8.5},
          {key: '17', 活动一: 18.4, 活动: 11.9},
          {key: '18', 活动一: 21.5, 活动: 15.2},
          {key: '19', 活动一: 25.2, 活动: 17.0},
          {key: '20', 活动一: 26.5, 活动: 16.6},
          {key: '21', 活动一: 23.3, 活动: 14.2},
          {key: '22', 活动一: 18.3, 活动: 10.3},
          {key: '23', 活动一: 13.9, 活动: 6.6},
          {key: '24', 活动一: 9.6, 活动: 4.8},
          {key: '25', 活动一: 7.0, 活动: 3.9},
          {key: '26', 活动一: 6.9, 活动: 4.2},
          {key: '27', 活动一: 9.5, 活动: 5.7},
          {key: '28', 活动一: 14.5, 活动: 8.5},
          {key: '29', 活动一: 18.4, 活动: 11.9},
          {key: '30', 活动一: 21.5, 活动: 15.2},
          {key: '31', 活动一: 25.2, 活动: 17.0},
        ],
      });
    }
  };
  // 确定时间段
  onTimeOk = value => {
    console.log (value[0].format ('YYYY-MM-DD HH:mm'));
  };
  // 确定时间段
  onTimeChange = value => {
    console.log (value[0].format ('YYYY-MM-DD HH:mm'));
  };
  render () {
    const {loading, tabList, data, searchTime} = this.state;
    const ds = new DataSet ();
    const dv = ds.createView ().source (data);

    dv.transform ({
      type: 'fold',
      fields: ['活动一', '活动'], // 展开字段集
      key: 'city', // key字段
      value: 'temperature', // value字段
    });
    const cols = {
      key: {
        range: [0, 1],
      },
    };
    return (
      <div className="page-activity">
        {/* 前三名 */}
        <Row gutter={16} style={{marginBottom: 20}}>
          <Col span={8}>
            <Card title="第一名" bordered={false}>Card content</Card>
          </Col>
          <Col span={8}>
            <Card title="第二名" bordered={false}>Card content</Card>
          </Col>
          <Col span={8}>
            <Card title="第三名" bordered={false}>Card content</Card>
          </Col>
        </Row>
        {/* 活动统计 */}
        <Card loading={loading} title="活动统计">
          <Tabs
            defaultActiveKey="day"
            onChange={key => {
              this.onTabChange (key, 'key');
            }}
            tabBarExtraContent={
              <RangePicker
                value={searchTime}
                showTime={{format: 'HH:mm'}}
                format={dateFormat}
                placeholder={['开始时间', '结束时间']}
                onOk={this.onTimeOk}
                onChange={this.onTimeChange}
                locale={locale}
              />
            }
          >
            {tabList.map (v => {
              return <TabPane tab={v.tab} key={v.key} />;
            })}
          </Tabs>
          <Chart height={400} data={dv} scale={cols} forceFit>
            <Legend name="key" position="top" title={null} dx={20} />
            <Axis name="key" />
            <Axis name="temperature" label={{formatter: val => `${val}`}} />
            <Tooltip crosshairs={{type: 'y'}} />
            <Geom
              type="line"
              position="key*temperature"
              size={2}
              color={'city'}
            />
            <Geom
              type="point"
              position="key*temperature"
              size={4}
              shape={'circle'}
              color={'city'}
              style={{stroke: '#fff', lineWidth: 1}}
            />
          </Chart>
        </Card>
      </div>
    );
  }
}
